{% extends "mall/base.html" %}

{% block title %}
    收货地址
{% endblock %}

{% block css %}
    <link rel="stylesheet" href="https://unpkg.com/vant/lib/vant-css/index.css">
    <link rel="stylesheet" href="{{ STATIC_URL }}/static/css/mall/address.css?v={{ version_code }}">
{% endblock %}

{% block header %}
{% endblock %}

{% block content %}
    <!--
    <div class="common-wrapper">
        <div class="address02">
            <div class="editInoutAll">
                <div class="fixed-top">
                    <div class="col02" id="selectAddressBtn" region-data="15,1213,3411,52667">
                        <div class="s-item bdb-1px" id="divAddress">
                            <div class="sitem-l sitem-pad add-box">
                                <div class="sattr-add">所在地区:
                                </div>
                                <div class="svalue">
                                    {% if address.sdef_address_province and address.sdef_address_city and address.sdef_address_county %}
                                        <input type="text"
                                               value="{{ address.sdef_address_province }} {{ address.sdef_address_city }} {{ address.sdef_address_county }}"
                                               id="txtProvince" readonly="readonly">
                                    {% else %}
                                        <input type="text" placeholder="点此选择地区" id="txtProvince"
                                               readonly="readonly">
                                    {% endif %}

                                </div>
                            </div>
                            {#                                <span class="s-point"></span>#}
                        </div>
                    </div>
                    <div class="address-big">
                        <div class="fixed-bottom" id="fixed-bottom" style="width: 100%;">
                        </div>
                    </div>
                    <div class="s-item bdb-1px change-padd">
                        <div class="sitem-l sitem-pad change-wid">
                            <div class="sattr-add change-padding">详细地址:</div>
                            <div class="svalue w65 change-po">
                                <textarea class="textauto change-sty not-over-see"
                                          id="txtAddress" placeholder="请输入详细地址：乡镇、街道、道路、楼牌号等" maxlength="200" rows="1" 
                                          style="overflow: hidden; word-wrap: break-word;border: 1px solid;height: 200px;">{{ address.sdef_address_detail }}</textarea>
                            </div>
                        </div>
                    </div>
                    <div class="s-item bdb-1px not-over-see">
                        <div class="sitem-l sitem-pad">
                            <div class="sattr-add">收货人:</div>
                            <div class="svalue">
                                <input type="text" id="txtName" value="{{ address.sdef_address_name }}"
                                       placeholder="请输入收货人姓名" class="ad-name">
                            </div>
                        </div>
                    </div>

                    <div class="s-item bdb-1px not-over-see">
                        <div class="sitem-l sitem-pad">
                            <div class="sattr-add">手机号码:</div>
                            <div id="mobileInputDiv" class="svalue">
                                <input type="tel" id="txtPhone" placeholder="请输入手机号"
                                       value="{{ address.sdef_address_phone }}" class="ad-mobile">
                            </div>
                        </div>
                        <span class="s-close" id="clearPhone" style="display: none;"><i></i></span>
                    </div>

                </div>


            </div>


            {#            <div class="s-item bdb-1px set-default" style="display: block;">#}
            {#                <div class="sitem-m sitem-pad change-wp">#}
            {#                    <div class="sattr change-fl">设为默认地址</div>#}
            {#                    <span class="pay-attention-address">注：每次下单时会使用该地址</span>#}
            {#                </div>#}
            {#                <div class="myswitch"></div>#}
            {#            </div>#}
            <div style="height: 100px;"></div>
        </div>

    </div>
    <div class="check-btn-total" style="bottom: 0px; display: block; position: fixed;" id="btnConfirm">
        <a href="javascript:void(0);" class="check-btn-grey check-btn-red">保存并返回上一页</a>
    </div>
    -->
    <div id="vAddress" class="vAddress">
        <van-address-edit
          :area-list="areaList"
          :address-info="addressInfo"
          @save="onSave">
        </van-address-edit>
    </div>
{% endblock %}

{% block footer %}
{% endblock %}

{% block js %}
    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
    <script src="https://unpkg.com/vant/lib/vant.min.js"></script>
    <script src="{{ STATIC_URL }}/static/js/mall/v-address-json.js?v={{ version_code }}"></script>
    <script src="{{ STATIC_URL }}/static/js/mall/address.js?v={{ version_code }}"></script>
    <script>
        /* 保存地址JSON */
        var _AREALIST = _CITYJSON;
        /* 保存暂存城市名 */
        var _SUB_CITY = '{{ address.sdef_address_city }}';
        /* 保存镇区名 */
        var _COUNTY = '{{ address.sdef_address_county }}';
        /* 保存省份名 */
        var _PROVINCE = '{{ address.sdef_address_province }}';
        /* 保存真实城市名 */
        var _CITY = _SUB_CITY.length > 0 ? _SUB_CITY : _COUNTY.substr(_SUB_CITY.length - 1);
        /* 定义初始化地址CODE */
        var _AREA_CODE = '';
        /* 定义地址CODE OBJECT */
        var CODE_OBJ = {
            _PROVINCE: [],
            _CITY: [],
            _COUNTY: []
        };
        /* 给地址CODE OBJECT赋值 */
        for (var item in _CITYJSON) {
            for (var list in _CITYJSON[item]) {
                if (_CITYJSON['province_list'][list] === _PROVINCE) {
                    CODE_OBJ._PROVINCE.push(list)
                } else if (_CITYJSON['city_list'][list] === _CITY) {
                    CODE_OBJ._CITY.push(list)
                } else if (_CITYJSON['county_list'][list] === _COUNTY) {
                    CODE_OBJ._COUNTY.push(list)
                };
            };
        };
        /* 获取最终镇区CODE */
        CODE_OBJ._COUNTY.forEach(function (e, i, a) {
            if (this[0].slice(0, 2) === e.slice(0, 2)) {
                _AREA_CODE = e
            };
        }, CODE_OBJ._PROVINCE);
        /* van-address组件conf */
        var addressInfo = {
            name: '{{ address.sdef_address_name }}',
            tel: '{{ address.sdef_address_phone }}',
            province: _PROVINCE,
            city: _CITY,
            county: _COUNTY,
            address_detail: '{{ address.sdef_address_detail }}',
            is_default: true,
            area_code: _AREA_CODE
        };
        new Vue({
            el: '#vAddress',
            data: function () {
                return {
                  areaList: _AREALIST
                }
            },
            methods: {
                onSave: function (data) {
                   var province = data.province + ' ';
                   var city = data.city.length > 1 ? data.city + ' ' : ' ';
                   var county = data.county + ' ';
                   var mainAddress = province + city + county;
                   var name = data.name;
                   var phone = data.tel;
                   var address = data.address_detail;
                   $.ajax({
                        url: location.href,
                        type: 'POST',
                        data: {
                            'action': 'add-address',
                            'mainAddress': mainAddress,
                            'name': name,
                            'phone': phone,
                            'address': address,
                            'postalCode': ''
                        },
                        dataType: 'json',
                        success: function (res) {
                            if (res["code"] == 0) {
                                try {
                                    var fromUrl = getUrlParam('f');
                                    fromUrl = decodeURIComponent(fromUrl);
                                    var fromUrlArr = fromUrl.split('?f=');
                                    if (fromUrlArr.length == 2) {
                                        fromUrl = fromUrlArr[0] += '?f=' + encodeURIComponent(fromUrlArr[1]);
                                    }
                                    location.href = fromUrl;
                                } catch (e) {
                                    history.back();
                                }
                            } else {
                                alert(res['msg']);
                            }
                        }
                   });
                }
            }
        })
    </script>
{% endblock %}
